<template>
  <div style="width: 100%; height: 100%">

<!--    表格区-->
    <div>
      <div >

        <div style="height:200px">
          <vxe-grid  v-bind="gridOptions" :data="dataList1" class="my-table" >
            <template #toolbar_buttons>
               <span style="padding-left: 10px">胜任度设置</span>
            </template>
            <template #tool_ref>
            </template>
            <template #action="{ row }">
              <TableAction outside :actions="[
          {
              label:'修改',
              onClick: handleEdit.bind(null, row),
          }
        ]
        " />
            </template>
          </vxe-grid>
        </div>
        <div style="top: 10px;height:300px">
          <vxe-grid  v-bind="gridOptions2" :data="dataList2" class="my-table" >
            <template #toolbar_buttons>
              <span style="padding-left: 10px">评价查看</span>

            </template>
            <template #tool_ref>
            </template>
          </vxe-grid>

        </div>

      </div>

      <FormModal @register="register" @success="scoreSettingListFn" />

    </div>


  </div>
</template>
<script lang="ts" setup>
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
  VxeTableDefines,
} from '@/components/VxeTable';

import { BasicTable, useTable, TableAction } from '@/components/Table';
import { qualifiedList,scoreSettingList } from '@/api/sys/sysData';
import { useDrawer } from '@/components/Drawer';
import { BasicTitle } from '/@/components/Basic/index';
import FormModal from './FormModal.vue';

import {onMounted, reactive, ref} from 'vue';

import { useMessage } from "@/hooks/web/useMessage";
import {Button, Modal,Card,CardGrid} from 'ant-design-vue';
import { useGo } from "@/hooks/web/usePage";
import {vxeTableColumns, vxeTableColumns2} from "./role.data";

const go = useGo();

defineOptions({ name: 'ywDeptList' });
const { createMessage } = useMessage();

// const [register, { openModal, closeModal }] = useModal();
const [register, { openDrawer,closeDrawer }] = useDrawer();

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: vxeTableColumns,
  filterConfig: {
    remote: true,
  },
  toolbarConfig: {
    // enabled: false,
    slots: {
      buttons: 'toolbar_buttons',
      tools:'tool_ref'
    },
  },
  formConfig: {
    enabled: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    enabled: false,
  },
});

const gridOptions2 = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: vxeTableColumns2,
  filterConfig: {
    remote: true,
  },
  toolbarConfig: {
    // enabled: false,
    slots: {
      buttons: 'toolbar_buttons',
      tools:'tool_ref'
    },
  },
  formConfig: {
    enabled: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    enabled: false,
  },
});


const loading=ref(false);
const msgList = ref([]);
const dataList1=ref([]);
const dataList2=ref([]);

const applyViewShow = ref(false);

const tableRef = ref<VxeGridInstance>();

const formData=ref({});

function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
  let json = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      json[field + 'Like'] = value;
    });
  }
  // console.log("----json:", json);
  // ywApproveList xftList
  return scoreSettingList({
    page: page.currentPage,
    pageSize: page.pageSize,
    ...form,
    ...json,
  });
}


function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
  });
}

onMounted(() => {
  // dd.ready(function() {
  //
  // }
  scoreSettingListFn(null);
  evaluateList();
})


function handleEdit(record: Recordable) {
  record.isUpdate=true;
  openDrawer(true, record);

}



function handleDelete(record: Recordable) {
}



function submitEvent({data}) {
  console.log("--submitEvent:",data);
  scoreSettingListFn(data);
}
function resetEvent(e){
  scoreSettingListFn(null);
}

//加载评价数据
function evaluateList(){
  let arr=[
    {type:"学历/职称",level:1,1:"无",2:"中专",3:"大专",4:"本科",5:"硕士",6:"博士"},
    {type:"工作经验",level:2,1:"无",2:"<1年",3:"1<=实际年份<3年",4:"3>=实际年份<5年",5:"5>=实际年份<10年",6:">=10年"},
    {type:"管理经验",level:3,1:"无",2:"<1年",3:"1<=实际年份<3年",4:"3>=实际年份<5年",5:"5>=实际年份<10年",6:">=10年"},
    {type:"专业经验",level:4,1:"无",2:"<1年",3:"1<=实际年份<3年",4:"3>=实际年份<5年",5:"5>=实际年份<10年",6:">=10年"},
    {type:"专业相符",level:5,1:"不相符",2:"相近",3:"相符",4:"",5:"",6:""},
    {type:"历史业绩",level:6,1:"不太满意",2:"基本满意",3:"满意",4:"很满意",5:"",6:""},
  ];
  dataList2.value=arr;

}

function scoreSettingListFn(data){
  loading.value = true;
  scoreSettingList(data).then((res) => {
    if (res.code === 200) {
      dataList1.value= res.data;
    }else{
      createMessage.error(res.message);
    }
  }).finally(() => {
    loading.value = false;
  })
}

</script>
<style lang="less">
.my-table{
  //width: 40%;
  margin-bottom: 5px;
  margin-top: 5px;
}
</style>
